<template>
	<view class="userinfo">
<!-- 		<image :src='avatar' mode="" class="avatar"></image>
		<view class="username">{{username}}</view> -->
		
		<image :src='obj.avatar' mode="" class="avatar"></image>
				<view class="username">{{obj.username}}</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';

	// let props = defineProps(['username', 'avatar'])
	// let myname = computed(()=>{
	// 	return props.username + '@'
	// })

	// let props = defineProps({
	// 	username: {
	// 		type: String,
	// 		default: '匿名'
	// 	},
	// 	avatar: {
	// 		type: String,
	// 		default: '/static/logo.png'
	// 	}
	// })
	
	
	defineProps({
		obj:{
			type: Object,
			default(){
				return {username: '匿名', avatar:'/static/logo.png'}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.userinfo {
		width: 100%;
		height: 200px;
		background: #ccc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}

		.username {
			padding: 10px 0;
			font-size: 20px;
		}
	}
</style>